<template>
  <div class="app-container">
    <div class="container">
      <div class="main page page-list">
        <div class="head-container">
          <el-card shadow="never">
            <div class="search-bar">
              <el-form
                size="mini"
                :inline="true"
                :model="searchModel"
              >
                <el-form-item label="转账状态:">
                  <el-radio-group
                    @change="search(1)"
                    v-model="searchModel.status"
                  >
                    <el-radio-button label="">不限</el-radio-button>
                    <el-radio-button label="WAIT_ENSURE">待转账</el-radio-button>
                    <el-radio-button label="WAIT_TRANS">转账处理中</el-radio-button>
                    <el-radio-button label="SUCCESS">批次全部处理成功</el-radio-button>
                    <el-radio-button label="PART_SUCCESS">批次部分处理成功</el-radio-button>
                    <el-radio-button label="DEALING">银行处理中</el-radio-button>
                    <el-radio-button label="FAIL">全部处理失败</el-radio-button>
                    <el-radio-button label="DISUSE">批次废弃</el-radio-button>
                  </el-radio-group>
                </el-form-item>

                <el-form-item label="外部批次号:">
                  <el-input
                    size="mini"
                    v-model="searchModel.importBatchNo"
                    placeholder="外部批次号"
                  ></el-input>
                </el-form-item>

                <el-form-item label="商户编号:">
                  <el-input
                    size="mini"
                    v-model="searchModel.userId"
                    placeholder="外部批次号"
                  ></el-input>
                </el-form-item>

                <el-form-item label="批次创建时间:">
                  <el-date-picker
                    v-model="searchModel.createTime"
                    type="datetimerange"
                    :picker-options="pickerOptions"
                    value-format='yyyy-MM-dd HH:mm:ss'
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    size="mini"
                    align="right"
                  >
                  </el-date-picker>
                </el-form-item>

                <el-form-item class="operations">
                  <el-button
                    type="primary"
                    @click="search(1)"
                  >查询</el-button>
                  <el-button
                    type="default"
                    @click="reset"
                  >重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </div>

        <el-card shadow="never">
          <el-table
            size="mini"
            v-loading="loading"
            ref="multipleTable"
            :data="tableData"
            highlight-current-row
          >
          <el-table-column
              width="150"
              label="批次创建时间"
            >
              <template slot-scope="scope">
                {{ scope.row.createTime }}
              </template>
            </el-table-column>
            
            <el-table-column
              width="130"
              label="商户编号"
            >
              <template slot-scope="scope">
                <div>
                  {{ scope.row.userId }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              width="130"
              label="外部批次号"
            >
              <template slot-scope="scope">
                <div>
                  {{ scope.row.importBatchNo }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="批次详情"
              width="200"
            >
              <template slot-scope="scope">
                <div class="probation-title">系统批次号：{{ scope.row.id }}</div>
                <div class="probation-title">批次总笔数：{{scope.row.totalCount}}</div>
                <div class="probation-title">成功笔数：{{scope.row.successCount}}</div>
                <div class="probation-title">失败笔数：{{scope.row.failCount}}</div>
                <div class="probation-title">批次总金额：{{scope.row.totalTransAmount}}</div>
                <div class="probation-title">成功金额：{{scope.row.successAmount}}</div>
                <div class="probation-title">失败金额：{{scope.row.failedAmount}}</div>
                <div class="probation-title">服务费：{{scope.row.servicePrice / 100}}</div>
                <div class="probation-title">服务费单价：
                  <span v-if="scope.row.mode === 'fixed_ratio'">
                    {{ (scope.row.serviceRatio * 100).toFixed(2) }}%
                  </span>
                  <span v-if="scope.row.mode === 'fixed_amount'">
                    {{ scope.row.serviceUnitPrice / 100 }}
                  </span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              width="150"
              prop="batchTransId"
              label="支付宝交易号"
            >
              <template slot-scope="scope">
                <div>
                  {{ scope.row.batchTransId ? scope.row.batchTransId : "-" }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              width="100"
              prop="alipayNickName"
              label="支付宝账号"
            >
              <template slot-scope="scope">
                <div>
                  {{ scope.row.alipayNickName ? scope.row.alipayNickName : "-" }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              width="100"
              label="转账状态"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.status === 'DEALING'">银行处理中</span>
                <span v-if="scope.row.status === 'WAIT_ENSURE'">待转账</span>
                <span v-if="scope.row.status === 'WAIT_TRANS'">转账处理中</span>

                <span
                  v-if="scope.row.status === 'SUCCESS'"
                  style="color:#67c23a"
                >批次全部处理成功</span>

                <span v-if="scope.row.status === 'PART_SUCCESS'">批次部分处理成功</span>
                <span
                  v-if="scope.row.status === 'FAIL'"
                  style="color:#F56C6C"
                >全部处理失败</span>
                <span
                  v-if="scope.row.status === 'DISUSE'"
                  style="color:#F56C6C"
                >批次废弃</span>
              </template>
            </el-table-column>

            
            <el-table-column label="操作">
              <template >
              </template>
            </el-table-column>
          </el-table>
          <el-row class="paging-wrap">
            <el-col :span="24">
              <el-pagination
                :current-page="searchModel.pageNo"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="searchModel.pageSize"
                layout="prev, pager, next, sizes, jumper"
                @size-change="PageSizeChange"
                @current-change="PageChange"
                :total="searchModel.count"
              >
              </el-pagination>
            </el-col>
          </el-row>
        </el-card>

      </div>
    </div>
  </div>
</template>


<script>
import { searchSafePayBatch } from "@/api/business";
import pickerOptions from "../../utils/options";
import moment from "moment";

let defaultSearchModel = {
  pageSize: 10,
  pageNo: 1,
  count: null,
  importBatchNo: null,
  createTime: [
 
  ],
  status: "", //状态
};
export default {
  data() {
    return {
      searchModel: _.cloneDeep(defaultSearchModel),
      loading: false,
      opLoading: false,
      tableData: [],
      pickerOptions,
    };
  },

  components: {},
  methods: {
    search(pageNo) {
      this.loading = true;
      if (pageNo) {
        this.searchModel.pageNo = pageNo;
      }
      let searchModel = _.cloneDeep(this.searchModel);
      this.compileSearchModel(searchModel);
      searchSafePayBatch(searchModel)
        .then((res) => {
          if (res.success) {
            this.loading = false;
            this.searchModel.count = res.count;
            this.tableData = res.data;
          } else {
            this.searchModel.count = 0;
            this.tableData = [];
          }
        })
        .catch((err) => {
          console.log(err);
          this.searchModel.count = 0;
          this.tableData = [];
        });
    },
    compileSearchModel(searchModel) {
      if (searchModel.createTime) {
        searchModel.minCreateTime = searchModel.createTime[0];
        searchModel.maxCreateTime = searchModel.createTime[1];
      }
      if (searchModel.status === "SUCCESS_AND_PART_SUCCESS") {
        searchModel.statusList = ["SUCCESS", "PART_SUCCESS"];
        searchModel.status = "";
      } else {
        this.searchModel.statusList = null;
      }

      searchModel.pageNo = searchModel.pageNo - 1;

      delete searchModel.createTime;
    },

    /**
     * 页数改变
     * @param data 改变后的页数
     * @constructor
     */
    PageChange(data) {
      this.searchModel.pageNo = data;
      this.search();
    },
    /**
     * 单页条数改变
     * @param data 改变后的条数
     * @constructor
     */
    PageSizeChange(data) {
      this.searchModel.pageSize = data;
      this.search();
    },
    reset() {
      this.searchModel = _.cloneDeep(defaultSearchModel);
      this.search();
    },
  },
  mounted() {
    this.search();
  },
};
</script>

<style lang="scss" scoped>
.substationGroup {
  margin-bottom: 16px;
  .substationItem {
    margin-right: 20px;
  }
}
</style>
